<template>
  <div style="display: flex;flex-direction: column;align-items: center;">
    <div class="top">

      <div style="padding: 40px 0;">
        <el-input style="width:200px" placeholder="请输入食材名称" suffix-icon="el-icon-search" v-model="name"></el-input>
        <el-button  style="margin-left: 10px" type="primary" @click="load">搜索</el-button>
        <el-button  style="margin-left: 10px" type="warning" @click="reset">重置</el-button>
        <!--          根据标签晒选-->
        <el-select v-model="types.fid" placeholder="根据标签查找" @change="select(types.fid)">
          <el-option
              v-for="item in types"
              :key="item.fid"
              :label="item.title"
              :value="item.fid">
          </el-option>
        </el-select>
      </div>
    </div>

    <!--   文章-->
    <div class="MainBodyOfArticle">
      <!--    左侧主题文章展示部分-->
      <div style="height: 100%;width: 80%;">
      <el-card class="treetable" >
        <el-row :gutter="15" class="rowlist">
          <el-col
              :md="24"
              :lg="{ span: '4-8' }"
              :xl="12"
              v-for="(item, index) in tableData"
              :key="index">
            <el-descriptions
                class="margin-top rowitem"
                :column="1"
                direction="vertical"
                size="mini"
                :colon="false"
                :labelStyle="{ 'font-weight': 'bold', 'font-size': '14px' }"
            >
              <el-descriptions-item
                  :labelStyle="{ 'font-size': '16px' }"
                  labelClassName="label16">
                <el-image
                    style="width: 100%; height: 100%"
                    :src="item.imgurl"
                    :fit="fit"></el-image>
              </el-descriptions-item>
              <el-descriptions-item label=" 名称：" :span="2">{{item.name }}</el-descriptions-item>
            </el-descriptions>
            <div class="listbtn">
              <el-button type="text" icon="el-icon-view">{{item.readnumber}}</el-button>
              <el-button style="color: red" type="text" icon="el-icon-thumb">{{item.good}}</el-button>
              <el-button style="color: #36b206" type="text" @click="$router.push('/mother/foodDetails?id='+item.id)">详情</el-button>
            </div>
          </el-col>
        </el-row>
        <!--    分页-->
        <hr>
        <div style="padding: 10px 0">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10,15,20,50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
      </div>
      <!--    右侧推荐部分-->
      <div class="rightSide">
        <!--推荐作者-->
        <div style="flex: 1;display: flex;flex-direction: column;background: #ffffff">
          <!--            推荐作者标题-->
          <div style="flex: 1;display: flex;align-items: center ;padding: 0px 30px;font-size: 16px;border-bottom: 1px solid #F2F2F2">
            推荐作者
          </div>
          <!--           作者列表-->
          <div style="flex: 6;flex-direction: column;">
            <div v-for="item in recommandUser" style="flex: 1;display: flex;padding: 2px 10px" :key="item">

              <!--                头像-->
              <div style="flex: 2">
                <el-image :src="item.avatar" style="width: 45px; height: 45px; border-radius: 50%;flex: 1;cursor: pointer " @click="$router.push('/mother/personalCenter/newArticleOfPersonal?id='+item.id)" ></el-image>
              </div>
              <!--                网名和信息-->
              <div style="flex: 6;display: flex;flex-direction: column;justify-items: center">
                <!--                    nickname-->
                <div style="flex: 1;color: #222226;font-size: 14px">
                  {{item.nickName}}
                </div>
                <!--                    简介-->
                <div style="flex: 2;color: #999aaa;font-size: 12px;padding-top: 5px; padding-left: 5px;padding-right: 5px ;overflow: hidden">
                  {{item.brief}}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--        推荐文章-->
        <div style="flex: 1.4;display: flex;flex-direction: column; background: #ffffff;height: 500px">
          <!--                板块标题-->
          <div style="display: flex;align-items: center; flex: 4;padding: 0px 30px;font-size: 16px;border-bottom: 1px solid #F2F2F2;height: 100px">
            推荐菜品
          </div>
          <!--            推荐文章信息-->
          <div class="aaabbb" v-for="item in recommandArticle" :key="item" style="flex: 6;display: flex;flex-direction: column;cursor: pointer" @click="$router.push('/mother/articleDetail?id='+item.id)">
            <div style="flex: 1;display: flex;flex-direction: column;justify-items: center">
              <!--文章标题-->

              <div style="flex: 2;font-size: 16px;color: #222226;font-weight: 500;overflow: hidden;text-overflow: ellipsis;padding:0px 5px;" >
                <span style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">{{item.name}}</span>
              </div>
              <!--        文章简介-->
              <div style="font-size: 13px;color: #999aaa;flex: 2;padding: 0 5px;overflow: hidden;">
                {{item.summary}}
              </div>
              <!--        文章信息-->
              <div style="flex: 1;display: flex;align-items: center;font-size: 12px;color: #999aaa">
                <!--            浏览次数-->
                <div style="padding-left: 5px;flex: 6;">
                  <i class="el-icon-view" style="margin-right: 5px"></i>{{item.readnumber}}
                </div>
                <!--            作者-->
                <div style="padding-right: 5px">
                <span>
                    {{item.user}}
                </span>
                  <span style="margin-left: 5px">
                    {{item.time}}
                </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import request from "@/router/request";

export default {
  name: "resourceDownload",
  data(){
    return {
      tableData: [],
      total:0,
      pageNum:1,
      pageSize:10,
      name:"",
      recommandUser:[],
      recommandArticle:[],
      types:[]
    }
  },
  created() {
    this.load()
    this.loadRecommodUser()
    this.loadRecommandArticleInfor()
    this.typeText()
  },
  methods:{

    typeText(){
      request.get("/ftype").then(res=>{
        this.types=res.data
      })
    },
    loadRecommandArticleInfor(){
      request.get("/article/recommandArticle").then(res=>{
        this.recommandArticle = res.data
      })
    },
    load(){
      request.get("/food",{
        params: {
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          name:this.name,
        }
      }).then(res=>
      {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
        this.typeText()
      })
      //将数据转化为json
    },


    //根据标签查询
    select(fid){
      request.get("/food",{
        params:{
          cover:fid,
        }
      }).then(res=>{
        this.tableData=res.data.records
      })
    },


    handleSizeChange(pageSize){
      // console.log(pageSize)
      this.pageSize=pageSize
      //之后请求数据
      this.load()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum
      this.load()
    },

    reset(){
      this.name = null;
      this.types= null;
      this.load()
    },
    loadRecommodUser(){
      request.get("/user/recommandUser").then(res=>{
        this.recommandUser = res.data;
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.top{
  height: 100px;
  width: 100%;
  background-image: url("../../assets/micro_bg.png");
  background-position:center;
  background-size: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.MainBodyOfArticle{

  height: 800px;
  width: 1300px;
  display: flex;
  gap: 20px;
  justify-content: center;

}
.leftSide{
  flex: 12;
  display: flex;
  flex-direction: column;
}
.rightSide{
  flex: 3;
  gap: 20px;
  display: flex;
  flex-direction: column;
  height: 800px;
}
.aaabbb:hover{
  background-color: rgb(240,240,240);
}
.treetable {
  height: calc(100%);
  overflow-y: auto;
  // padding-bottom: 50px;
  .el-col-lg-4-8 {
    width: 20%;
  }
}
.rowlist {
  .rowitem {
    border: 1px solid #ebeef5;
    padding: 5px;
    cursor: pointer;
    &:hover {
      border-color: #73b8ff;
    }
    img {
      height: 120px;
      width: 100%;
    }
    .label16 {
      font-size: 16px;
    }
  }
  .listbtn {
    display: flex;

    justify-content: space-around;
  }
}
</style>
